<template>
  <div class="main-group main div-center">
    <div class="login-group div-center">
      <div class="login-info">
        <div class="login-title">
          <h3>用车申请系统登录</h3>
        </div>
        <div class="login-form">
          <el-form ref="loginForm" :rules="rules" :model="loginForm" label-width="80px" @keydown.enter.native="submit">
            <el-form-item label="用户名" prop="username">
              <el-input prefix-icon="el-icon-user" v-model="loginForm.username" placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input show-password prefix-icon="el-icon-lock" v-model="loginForm.password" placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginView',
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [{
          required: true,
          message: '用户名不能为空'
        }],
        password: [{
          required: true,
          message: '密码不能为空'
        }]
      }
    }
  },
  methods: {
    submit () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$http.post('login', this.loginForm).then(data => {
            if (data) {
              const date = new Date(data.expires)
              date.setHours(date.getHours() + 8)
              this.$cookies.set('token', data.token, date)
              /* 页面跳转 */
              this.$router.replace('/home')
            }
          }).catch(() => {})
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.main{
  background: url("@/assets/login-bg.jpg") no-repeat center/cover;
  .login-group{
    background-color: rgba(255,255,255,.4);
    height: 40vh;
    width: 30vw;
    border-radius: 15px;
    box-shadow: 4px 4px 4px rgba(0,0,0,.4);
    .login-info{
      width: 90%;
      .login-title{
        height: 32px;
        text-align: center;
      }
    }
  }
}
</style>
